<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ArrowRight, Expand, Fold, RefreshRight, Setting, SwitchButton } from '@element-plus/icons-vue'
import UserIcon from '@/components/icons/UserIcon.vue'
import { queryAdminInfo } from '@/service/admin.js'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const collapse = ref(false)
const emits = defineEmits(['collapseEvent'])

function onTapChangeExpand() {
  collapse.value = !collapse.value
  emits('collapseEvent', collapse.value)
  console.log('点击折叠')
}

function onTapReFresh() {
  console.log('点击刷新')
  location.reload(true)
}

const adminInfo = reactive({
  nickname: '',
})
onMounted(async () => {
  const { data } = await queryAdminInfo()
  adminInfo.nickname = data.nickname
})
function logout() {
  localStorage.removeItem('Authorization')
  router.replace('/login')
}
const breadcrumbList = ref([])
// 硬编码面包屑
const breadcrumbMap = {
  '/dashboard/operational/data': [
    { title: '首页', path: '/' },
    { title: '仪表盘', path: '/dashboard/operational/data' },
    { title: '运营数据', path: '/dashboard/operational/data' },
  ],
  '/dashboard/service/monitoring': [
    { title: '首页', path: '/' },
    { title: '仪表盘', path: '/dashboard/operational/data' },
    { title: '服务监控', path: '/dashboard/service/monitoring' },
  ],
  '/dashboard/cache/monitoring': [
    { title: '首页', path: '/' },
    { title: '仪表盘', path: '/dashboard/operational/data' },
    { title: '缓存监控', path: '/dashboard/cache/monitoring' },
  ],
  '/content/carousel': [
    { title: '首页', path: '/' },
    { title: '内容管理', path: '/content/carousel' },
    { title: '轮播图', path: '/content/carousel' },
  ],
  '/content/zone': [
    { title: '首页', path: '/' },
    { title: '内容管理', path: '/content/carousel' },
    { title: '专区管理', path: '/content/zone' },
  ],
  '/content/brand': [
    { title: '首页', path: '/' },
    { title: '内容管理', path: '/content/carousel' },
    { title: '品牌管理', path: '/content/brand' },
  ],
  '/content/ranking': [
    { title: '首页', path: '/' },
    { title: '内容管理', path: '/content/carousel' },
    { title: '热销榜单', path: '/content/ranking' },
  ],
  '/customer/statistics': [
    { title: '首页', path: '/' },
    { title: '用户统计', path: '/customer/statistics' },
  ],
  '/customer/management': [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/customer/management' },
  ],
  '/customer/feedback': [
    { title: '首页', path: '/' },
    { title: '用户反馈', path: '/customer/feedback' },
  ],
  '/products/show/list': [
    { title: '首页', path: '/' },
    { title: '商品管理', path: '/products/show/list' },
    { title: '商品列表', path: '/products/show/list' },
  ],
  '/products/category': [
    { title: '首页', path: '/' },
    { title: '商品管理', path: '/products/show/list' },
    { title: '商品分类', path: '/products/category' },
  ],
  '/products/review': [
    { title: '首页', path: '/' },
    { title: '商品管理', path: '/products/show/list' },
    { title: '商品评价', path: '/products/review' },
  ],
  '/products/stock/shortage/application': [
    { title: '首页', path: '/' },
    { title: '商品管理', path: '/products/show/list' },
    { title: '缺货申请', path: '/products/stock/shortage/application' },
  ],
  '/products/list/create': [
    { title: '首页', path: '/' },
    { title: '商品管理', path: '/products/show/list' },
    { title: '创建商品', path: '/products/list/create' },
  ],
  '/products/list/edit': [
    { title: '首页', path: '/' },
    { title: '商品管理', path: '/products/show/list' },
    { title: '编辑商品', path: '/products/list/edit' },
  ],
  '/orders/configuration': [
    { title: '首页', path: '/' },
    { title: '订单管理', path: '/orders/statistics' },
    { title: '订单配置', path: '/orders/configuration' },
  ],
  '/orders/reason/for/return': [
    { title: '首页', path: '/' },
    { title: '订单管理', path: '/orders/statistics' },
    { title: '退货原因', path: '/orders/reason/for/return' },
  ],
  '/orders/statistics': [
    { title: '首页', path: '/' },
    { title: '订单管理', path: '/orders/statistics' },
    { title: '订单统计', path: '/orders/statistics' },
  ],
  '/orders/process': [
    { title: '首页', path: '/' },
    { title: '订单管理', path: '/orders/statistics' },
    { title: '订单管理', path: '/orders/process' },
  ],
  '/orders/after-sales': [
    { title: '首页', path: '/' },
    { title: '订单管理', path: '/orders/statistics' },
    { title: '售后订单', path: '/orders/after-sales' },
  ],
  '/marketing/campaign/coupon/list': [
    { title: '首页', path: '/' },
    { title: '营销活动', path: '/marketing/campaign/coupon/list' },
    { title: '优惠券列表', path: '/marketing/campaign/coupon/list' },
  ],
  '/marketing/campaign/collection/records': [
    { title: '首页', path: '/' },
    { title: '营销活动', path: '/marketing/campaign/coupon/list' },
    { title: '用户领取记录', path: '/marketing/campaign/collection/records' },
  ],
  '/marketing/campaign/newcomer/area': [
    { title: '首页', path: '/' },
    { title: '营销活动', path: '/marketing/campaign/coupon/list' },
    { title: '新客商品', path: '/marketing/campaign/newcomer/area' },
  ],
  '/marketing/campaign/short/dated/sale': [
    { title: '首页', path: '/' },
    { title: '营销活动', path: '/marketing/campaign/coupon/list' },
    { title: '临期商品', path: '/marketing/campaign/short/dated/sale' },
  ],
  '/marketing/campaign/flash/sale': [
    { title: '首页', path: '/' },
    { title: '营销活动', path: '/marketing/campaign/coupon/list' },
    { title: '秒杀商品', path: '/marketing/campaign/flash/sale' },
  ],
}
watch(
  route,
  () => {
    const path = route.fullPath
    if (path.replace(/\/[^/]*$/, '') === '/products/list/edit') {
      // 编辑商品的特殊情况
      breadcrumbList.value = breadcrumbMap['/products/list/edit']
    } else {
      breadcrumbList.value = breadcrumbMap[path]
    }
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <div class="home-header">
    <div class="home-header-trigger" @click="onTapChangeExpand">
      <el-icon :size="20">
        <Expand v-if="collapse" />
        <Fold v-else />
      </el-icon>
    </div>
    <div class="home-header-trigger">
      <el-icon :size="20" @click="onTapReFresh">
        <refresh-right />
      </el-icon>
    </div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="breadcrumb in breadcrumbList" :key="breadcrumb" :to="{ path: breadcrumb.path }">{{
        breadcrumb.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="admin-info">
      <el-dropdown size="small">
        <span class="dropdown">
          <el-icon :size="20">
            <UserIcon />
          </el-icon>
          <span>{{ adminInfo.nickname }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-dropdown-item :icon="Setting">账户设置</el-dropdown-item>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-dropdown-item :icon="SwitchButton" @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-header {
  display: flex;
  align-items: center;
  height: 100%;
}

.home-header-trigger {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }
}

.el-breadcrumb {
  margin-left: 10px;
}

.admin-info {
  margin-left: auto;
  margin-right: 10px;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;

  .dropdown {
    display: flex;
    align-items: center;
  }

  &:hover {
    background-color: #f5f5f5;
  }
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>
